<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="Image/x-icon" href="pictures/icons/fav-ico.ico" rel="icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Lilita+One&family=PT+Sans+Narrow:wght@400;700&family=Raleway:wght@100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Borodinski-questions</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="header header-shop">
        <div class="header__groups">
          <nav class="header__navigation">
            <a href="index.html" class="header__btn btn-main"
              ><img src="pictures/icons/logo-short-dark.svg" alt=""
            /></a>
            <a href="about-us.html" class="header__btn btn-us">О нас</a>
            <a href="shop.html" class="header__btn btn-catalog"> Каталог</a>
            <a href="questions.html" class="header__btn btn-questions">
              Частые вопросы</a
            >
          </nav>
          <div class="header__group-2">
            <a href="#" class="header__btn btn-find">
              <img src="pictures/icons/search.svg" alt="ПОИСК" />
            </a>
            <div class="header__basket basket">
              <a href="#popover" class="header__btn btn-basket popover-link">
                <img
                  class="btn-basket__icon"
                  src="pictures/icons/cart.svg"
                  alt="КОРЗИНА"
                />
                <p class="basket__goods-number">0</p>
              </a>
              <div id="popover" class="basket__popover basket-popover popover">
                <div class="popover__content">
                  <div class="close-popover">
                    <a type="button" class="close-popover__btn">
                      <img src="pictures/icons/cart-black.svg" alt="" />
                      <p class="basket__goods-number">0</p>
                    </a>
                  </div>
                  <h2 class="basket-popover__title">Корзина</h2>
                  <div class="basket-popover__list">
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка машинкой</h3>
                        <p>800 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка усов</h3>
                        <p>1200 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a
              href="#popup"
              type="button"
              class="header__btn btn-enter popup-link"
              >Вход</a
            >
          </div>
        </div>
      </header>
      <main class="main--questions">
        <div class="main-wrapper--questions">
          <div class="main__head">
            <h2 class="main__title">Топ 10 ваших вопросов нам</h2>
            <img src="pictures/icons/message.svg" width="30px" height="30px" />
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №1</h2>
            <div class="item__question">
              Как часто мне следует стричься?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Это зависит от вашего типа волос и желаемого стиля. Как правило,
              рекомендуется стричься каждые 4–6 недель, чтобы сохранить желаемый
              вид.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №2</h2>
            <div class="item__question">
              Какие прически сейчас популярны?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Популярные прически со временем меняются, но в настоящее время в
              моде такие стили, как выцветание, подрезы, помпадур и
              текстурированные стрижки. Наши парикмахеры всегда в курсе
              последних тенденций и могут предложить варианты с учетом ваших
              предпочтений.

              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №3</h2>
            <div class="item__question">
              Как ухаживать за волосами между стрижками?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Регулярно используйте шампунь и кондиционируйте волосы, избегайте
              чрезмерной термоукладки. Используйте качественные средства для
              волос, подходящие вашему типу волос, и раз в неделю наносите
              увлажняющую маску для волос.

              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №4</h2>
            <div class="item__question">
              Как подобрать стрижку по форме лица?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Разным формам лица подходят разные прически. Наши парикмахеры
              умеют оценивать форму лица и могут порекомендовать стили, которые
              подчеркнут ваши черты. Не стесняйтесь спрашивать совета во время
              вашего визита.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №5</h2>
            <div class="item__question">
              У меня истончаются или лысеют волосы. Какие у меня есть варианты?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Наши парикмахеры имеют опыт борьбы с выпадением волос и могут
              предложить подходящие прически или методы ухода, которые помогут
              решить ваши проблемы. Они также могут порекомендовать средства по
              уходу за волосами, которые способствуют росту волос.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №6</h2>
            <div class="item__question">
              Можете ли вы порекомендовать средства для волос для моего
              конкретного типа волос?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Абсолютно! Наши парикмахеры хорошо осведомлены о различных
              продуктах для волос и могут предложить лучшие средства для вашего
              конкретного типа волос, будь то сухие, жирные, вьющиеся или
              прямые.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №7</h2>
            <div class="item__question">
              В чем разница между фейдом и конусом?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Под фейдом подразумевается постепенный переход от коротких к
              длинным волосам, обычно с выцветанием по бокам и назад к макушке.
              С другой стороны, конус предполагает постепенное укорачивание
              волос по направлению к вырезу.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №8</h2>
            <div class="item__question">
              Сколько времени нужно, чтобы сделать стрижку?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Продолжительность стрижки варьируется в зависимости от сложности
              прически и конкретных требований клиента. В среднем стрижка
              занимает около 30 минут. но оно может быть короче или длиннее в
              зависимости от обстоятельств.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №9</h2>
            <div class="item__question">
              Могу ли я принести фото прически, которая мне нравится?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Абсолютно! Если вы принесете с собой фотографию желаемой прически,
              это поможет сообщить парикмахеру о ваших предпочтениях. Они будут
              работать с вами, чтобы добиться похожего внешнего вида, который
              будет соответствовать вашим уникальным особенностям.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
          <div class="main--questions__item item">
            <h2 class="item__title">Вопрос №10</h2>
            <div class="item__question">
              Как мне сохранить бороду?
              <div class="main--questions__avatar-customer">
                <img
                  src="pictures/icons/avatar-icon.webp"
                  alt=""
                  width="50px"
                  height="50px"
                />
              </div>
            </div>
            <div class="item__answer">
              Регулярно мойте и ухаживайте за бородой, а также используйте масло
              или бальзам для бороды, чтобы она оставалась увлажненной и мягкой.
              Подравнивание и придание формы бороде также имеет решающее
              значение для поддержания ее опрятного вида. Наши парикмахеры могут
              дать советы по уходу за бородой и порекомендовать средства по
              уходу за бородой.
              <div class="main--questions__avatar-assistant">
                <img
                  src="pictures/icons/mustache.svg"
                  alt=""
                  width="40px"
                  height="40px"
                />
              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- Футер -->
      <footer class="footer">
        <div class="footer__wrapper">
          <div class="footer__info footer-left">
            <img
              src="pictures/icons/logo-short-dark.svg"
              alt="BORODINSKI"
              class="footer-left__short-logo"
            />
            <p class="footer-left__paragraph">
              Санкт-Петербург, набережная<br />
              реки Карповки, 5, литера П.
            </p>
            <h3 class="footer-left__phone">+7 800 555-86-28</h3>
            <a href="" class="footer-left__link">Как нас найти?</a>
          </div>
          <div class="footer__offers footer-middle">
            <h3 class="footer-middle__title footer-title">
              Получайте лучшие предложения
            </h3>
            <div class="footer__form">
              <input
                class="footer-middle__email-form"
                type="text"
                placeholder="Введите ваш email"
              />
              <button class="submit-email-btn">
                <img src="pictures/icons/arrow-tail-right.svg" alt="" />
              </button>
            </div>
          </div>
          <div class="footer__social-media footer-right">
            <h3 class="footer-right__title footer-title">Давайте дружить</h3>
            <button class="footer-right__btn btn-sotial-media" type="button">
              <p>Профиль gitHub</p>
              <img src="pictures/icons/gitHub.png" alt="" width="auto%" />
            </button>
            <p class="footer-right__signature">
              Created by: <span class="creator">Hollow_DS</span>
            </p>
          </div>
        </div>
      </footer>
      <!-- Popup -->
      <div id="popup" class="popup">
        <div class="popup__body">
          <div class="popup__content">
            <a href="#" class="popup__close close-popup"
              ><img src="pictures/icons/cross.svg" alt=""
            /></a>
            <div class="popup__title">Личный кабинет</div>
            <div class="popup__box-1">
              <input class="popup__form-1" type="text" />
              <input class="popup__form-2" type="text" />
            </div>
            <div class="popup__box-2">
              <div class="popup__checkbox-container checkbox">
                <label class="check option">
                  <input class="check__input" type="checkbox" checked /><span
                    class="check__box"
                  ></span
                  >Запомнить меня
                </label>
              </div>
              <a class="foggot-password" href="">Забыл пароль</a>
            </div>
            <button class="popup-btn-enter" type="submit">Войти</button>
            <button class="popup-btn-registration" type="submit">
              Регистрация
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
